<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body{background-color: rgb(241,242,243)}
        .el-header{background-color: white}
        #footer_center h3{color: white}
        #footer_center p{margin: 0}
        #szp{font-size: 20px;
        color: #2f3234;
            margin-right: 30px;
        }
        .szp_1{color: plum}
        .szp-2{background-image: url("imgs/img.png")}


    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="80px">
            <div style="width: 1200px;margin: 0 auto">
                <el-row gutter="20">
                    <el-col span="6">

                        <img src="imgs/img_2.png" width="80">

                    </el-col>
                    <el-col span="10">
                        <el-menu mode="horizontal" active-text-color="orange">
                            <el-menu-item index="1">房间剩余信息</el-menu-item>
                            <el-menu-item index="2">豪华大床房</el-menu-item>
                            <el-menu-item index="3">情侣浪漫房</el-menu-item>
                            <el-menu-item index="4">轻奢双人房</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col span="6">
                        <el-input style="position: relative;top: 15px" placeholder="请选择剩余的房号">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-col>
                    <el-col span="2">
                        <el-popover
                                placement="top-start"
                                title="欢迎来到A酒店!"
                                width="200"
                                trigger="hover">
                            <!--设置初始显示的内容-->
                            <div slot="reference">
                                <i style="font-size: 30px;position: relative;top: 20px" class="el-icon-user"></i>
                            </div>
                            <!--设置弹出的内容-->
                            <el-button type="info">注册</el-button>
                            <el-button type="warning">登录</el-button>
                        </el-popover>
                    </el-col>
                </el-row>
            </div>
        </el-header>
        <el-main style="width: 1200px;margin: 0 auto">
            <!--轮播图开始-->
            <el-carousel height="350px">
                <el-carousel-item v-for="item in 3">
                    <img :src="'imgs/img'+item+'.png'" width="100%">
                </el-carousel-item>
            </el-carousel>
            <!--轮播图结束-->
            <!--烘焙食谱开始-->
            <el-row style="background-color: white">
                <el-col span="3">
                    <p style="font-size: 28px;margin: 15px">豪华大床房</p>
                </el-col>
                <el-col span="21">
                    <el-menu mode="horizontal" default-active="0"
                             active-text-color="orange">
                        <el-menu-item index="0">全部</el-menu-item>
                        <el-menu-item index="1">复古豪华总统套房房</el-menu-item>
                        <el-menu-item index="2">现代流行大床房</el-menu-item>
                        <el-menu-item index="3">轻奢影院豪华房</el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>
            <el-row gutter="20">
                <el-col span="8" style="margin: 10px 0" v-for="item in dcfArr">
                    <el-card>
                        <img :src="item.imgUrl" width="100%" height="145">
                        <p style="height: 40px">{{item.title}}</p>
                        <el-row>
                            <el-col span="4" >
                                <el-avatar size="small" :src="item.userImgUrl"></el-avatar>
                            </el-col>
                            <el-col span="10">{{item.nickName}}</el-col>
                            <el-col span="10">
                                <span style="float: right;font-size: 12px;color: #666">{{item.categoryName}}</span>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>

            <!--烘焙食谱结束-->

            <!--烘焙视频开始-->
            <el-row style="background-color: white">
                <el-col span="3">
                    <p  class="szp_1" style="font-size: 28px;margin: 15px" >情侣浪漫房</p>
                </el-col>
                <el-col span="21">
                    <el-menu mode="horizontal" default-active="0"
                             active-text-color="orange">
                        <el-menu-item index="0">全部</el-menu-item>
                        <el-menu-item index="1">泡泡浪漫房</el-menu-item>
                        <el-menu-item index="2">梦幻影院房</el-menu-item>
                        <el-menu-item index="3">邂逅系浪漫房</el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>
            <el-row gutter="20">
                <el-col span="8" style="margin: 10px 0" v-for="item in recipeArr">
                    <el-card>
                        <img :src="item.imgUrl" width="100%" height="145">
                        <p style="height: 40px">{{item.title}}</p>
                        <el-row>
                            <el-col span="4" >
                                <el-avatar size="small" :src="item.userImgUrl"></el-avatar>
                            </el-col>
                            <el-col span="10">{{item.nickName}}</el-col>
                            <el-col span="10">
                                <span style="float: right;font-size: 12px;color: #666">{{item.categoryName}}</span>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>

            <!--烘焙视频结束-->
            <!--行业资讯开始-->
            <el-row style="background-color: white">
                <el-col span="3">
                    <p style="font-size: 28px;margin: 15px">轻奢双人房</p>
                </el-col>
                <el-col span="21">
                    <el-menu mode="horizontal" default-active="0"
                             active-text-color="orange">
                        <el-menu-item index="0">全部</el-menu-item>
                        <el-menu-item index="1">双浴双人床</el-menu-item>
                        <el-menu-item index="2">科技双人房</el-menu-item>
                        <el-menu-item index="3">娱乐双人房</el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>
            <el-row gutter="20">
                <el-col span="8" style="margin: 10px 0" v-for="item in infoArr">
                    <el-card>
                        <img :src="item.imgUrl" width="100%" height="145">
                        <p style="height: 40px">{{item.title}}</p>
                        <el-row>
                            <el-col span="4" >
                                <el-avatar size="small" :src="item.userImgUrl"></el-avatar>
                            </el-col>
                            <el-col span="10">{{item.nickName}}</el-col>
                            <el-col span="10">
                                <span style="float: right;font-size: 12px;color: #666">{{item.categoryName}}</span>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>

            <!--行业资讯结束-->
        </el-main>
        <el-footer style="background-color: #2f3234;height: 280px;padding: 50px 0">
            <div  class="szp-2" style="width: 1200px;margin: 0 auto;text-align: center;color: #666">
                <el-row gutter="20">
                    <el-col span="8">

                        <p>制造浪漫的婚礼仪式</p>
                        <p>为你带来家的感觉</p>
                        <p>专注更高的服务，让顾客有优质的体验感</p>
                        <p>为打造优质的酒店，为让顾客满意而生</p>
                    </el-col>
                    <el-col id="footer_center" span="8">
                        <el-row gutter="20">
                            <el-col span="8">
                                <h3>关于我们</h3>
                                <p>可以线上加盟</p><p>定制豪华的现场</p>
                                <p>环境优美</p><p>孩童乐园</p><p>室内游泳池</p>
                            </el-col>
                            <el-col span="8">
                                <h3>服务与支持</h3>
                                <p>二十四小时客房服务</p><p>顾客提前六小时无理由退房</p>
                                <p>支持顾客在线投诉</p><p>全屋智能控制</p>

                            </el-col>
                            <el-col span="8">
                                <h3>底部导航</h3>
                                <p>Archiver</p><p>手机版</p><p>小黑屋</p>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col span="8">
                        <img src="" alt="">
                        <p style="font-size: 40px;margin: 0">
                            <span style="color: orange">我们的酒店</span>为你而生
                        </p>
                        <p>酒店预订快捷平台</p>
                    </el-col>
                </el-row>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                dcfArr:[
                    {
                        "id": 27,
                        "title": "给你帝王般的感觉",
                        "imgUrl": "imgs/img_4.png",
                        "categoryName": "复古豪华总统套房房",
                        "nickName": "汤姆",
                        "userImgUrl": "imgs/img1.png"
                    },
                    {
                        "id": 18,
                        "title": "让你感受科技的伟大",
                        "imgUrl": "imgs/img_5.png",
                        "categoryName": "现代流行大床房",
                        "nickName": "现代流行大床房",
                        "userImgUrl": "imgs/img2.png"
                    },
                    {
                        "id": 17,
                        "title": "心形火龙果椰蓉面包,任谁都抗拒不了",
                        "imgUrl": "imgs/img_11.png",
                        "categoryName": "轻奢影院豪华房",
                        "nickName": "",
                        "userImgUrl": "imgs/img3.png"
                    },

                ],
                recipeArr:[
                    {
                        "id": 27,
                        "title": "给你帝王般的感觉",
                        "imgUrl": "imgs/img_7.png",
                        "categoryName": "回到初恋的感觉，一切都是最美好的样子",
                        "nickName": "泡泡浪漫房",
                        "userImgUrl": "imgs/img1.png"
                    },
                    {
                        "id": 18,
                        "title": "让你感受科技的伟大",
                        "imgUrl": "imgs/img_6.png",
                        "categoryName": "让你体验只有两个人的世界，体验给好的舒适感",
                        "nickName": "梦幻影院房",
                        "userImgUrl": "imgs/img2.png"
                    },
                    {
                        "id": 17,
                        "title": "心形火龙果椰蓉面包,任谁都抗拒不了",
                        "imgUrl": "imgs/img_5.png",
                        "categoryName": "浪漫邂逅房，给你初恋的感觉",
                        "nickName": "邂逅系浪漫房",
                        "userImgUrl": "imgs/img3.png"
                    },

                ],
                infoArr:[
                    {
                        "id": 27,
                        "title": "给你帝王般的感觉",
                        "imgUrl": "imgs/img_10.png",
                        "categoryName": "复古豪华总统套房房",
                        "nickName": "汤姆",
                        "userImgUrl": "imgs/img1.png"
                    },
                    {
                        "id": 18,
                        "title": "让你感受科技的伟大",
                        "imgUrl": "imgs/img_9.png",
                        "categoryName": "现代流行大床房",
                        "nickName": "现代流行大床房",
                        "userImgUrl": "imgs/img2.png"
                    },
                    {
                        "id": 17,
                        "title": "心形火龙果椰蓉面包,任谁都抗拒不了",
                        "imgUrl": "imgs/img_8.png",
                        "categoryName": "配备了豪华的娱乐设施，有电子设备，棋牌设施",
                        "nickName": "娱乐双人房",
                        "userImgUrl": "imgs/img3.png"
                    },

                ]
            }
        },
        methods:{

        }
    })
</script>
</html>